<template>
	<view class="login-container">
		<view class="login-title"><image  src="../../static/login/logo.png" class="logo"></image></view>
		<view class="login-panel">
			<view class="input_item" :class="border == 'dashed1'?'dashed-border':''">
				<image src="../../static/login/user_icon.png" class="ipt-icon" mode=""></image>
				<input class="ipt" type="text" v-model="form.username" @focus="border='dashed1'" @blur="border='solid1'" placeholder="请输入账号" placeholder-class="login-ipt-placeholder"/>
			</view>
			<view class="input_item" :class="border == 'dashed2'?'dashed-border':''">
				<image src="../../static/login/password_icon.png" class="ipt-icon" mode=""></image>
				<input class="ipt" type="password" v-model="form.password" @focus="border='dashed2'" @blur="border='solid2'" placeholder="请输入密码" placeholder-class="login-ipt-placeholder"/>
			</view>
			<!-- <view class="input_item nborder" >
				<input class="ipt border" :class="border == 'dashed3'?'dashed-border':''" type="password" v-model="form.code" @focus="border='dashed3'" @blur="border='solid23'" placeholder="请输入验证码" placeholder-class="login-ipt-placeholder"/>
				<view class="code-panel">7364</view>
			</view> -->
			<view class="login-btn-panel" @click="handleLogin">
				登&nbsp;&nbsp;录
			</view>
		</view>
	</view>
</template>

<script>
	// import {subscribe} from '@/common/util.js'
	export default {
		data() {
			return {
				border: 'solid',
				form: {
					username: '',
					password: '',
					code: ''
				}
			}
		},
		onLoad(option) {
			const exit = option.exit
			if(exit == 1){
				this.$api.toastMsg('用户退出成功')
			}else if(exit == 2){
				this.$api.toastMsg('登录失效，请重新登录')
			}else if(exit == 3){
				this.$api.toastMsg('密码修改成功')
			}
			this.form.username = uni.getStorageSync('USER_USERNAME')
			this.form.password = uni.getStorageSync('USER_P')
		},
		methods: {
			handleLogin(){
				const {username,password,code} = this.form
				if(!username.replace(/<[^>]*>|/g, "").replace(/&nbsp;/gi, '').trim()){
					this.$api.toastMsg('请输入账号')
				}else if(!password.replace(/<[^>]*>|/g, "").replace(/&nbsp;/gi, '').trim()){
					this.$api.toastMsg('请输入密码')
				// }else if(!code.replace(/<[^>]*>|/g, "").replace(/&nbsp;/gi, '').trim()){
				// 	this.$api.toastMsg('请输入验证码')
				}else{
					// _this.$api.toastMsg('登陆成功','success')
					// uni.setStorageSync('USER_TOKEN','test');
					// uni.setStorageSync('USER_USERNAME',username);
					// if(username == 'admin'){
					// 	uni.setStorageSync('USER_ROLE','admin');
					// }else{
					// 	uni.setStorageSync('USER_ROLE','user');
					// }
					// setTimeout(()=>{
					// 	uni.reLaunch({
					// 		url:'/pages/index/index'
					// 	})
					// },2000)
					uni.showLoading({
						title:'登录中',mask: true
					})
					this.$api.request('/auth/login', {
						method: 'post',
						data: JSON.stringify({
							username: username,
							password: password,
						}),
						header: {
							'Content-Type': 'application/json',
							'Authorization': 'Bearer'
						}
					}).then((res) => {
						uni.hideLoading()
						if(res.success){
							const {user, token} = res.data;
							console.log(user)
							const role = user.user.roles[0].roleType
							uni.setStorageSync('USER_TOKEN', token);
							uni.setStorageSync('USER_INFO',user.user);
							uni.setStorageSync('USER_ROLE',role);
							uni.setStorageSync('USER_USERNAME',user.user.username);
							uni.setStorageSync('USER_REALNAME',user.user.realName);
							uni.setStorageSync('USER_P',this.form.password);
							this.$api.toastMsg('登陆成功','success')
							//更新用户的Openid
							this.getOpenidAndUpdateUser();
							//订阅
							// let tmplIds = []
							// if(role==='e036_05'){
							// 	tmplIds = ['cgSwchbIglkRAr7JSUd8VcQW9PfvedntpuzDIRCBZnM',//设备告警提醒
							// 			   'Yzi7E8henosVCUMYBke46JCsXjvSa0fud1cQDQTDfIU',//日程提醒
							// 			   'X_5T1Fa9yfz9Num3vWWUElga2r-2mOgjXIqHoDXzgNo'];//打卡成功通知
							// }else if(role==='e036_06'){
								
							// }else{
							// 	tmplIds = ['cgSwchbIglkRAr7JSUd8VcQW9PfvedntpuzDIRCBZnM',//设备告警提醒
							// 			   'Yzi7E8henosVCUMYBke46JCsXjvSa0fud1cQDQTDfIU',//日程提醒
							// 			   // 'S27nI4FRs8wfBs4JMEtN4PR_KQpiVAmeHaLVbOgjgts',//任务督办提醒
							// 			   'nuRBNTKZxbOpgf95WeoiPQ2atWPiv3YoRNX2K1aUkOU'];//审核结果通知
							// }
							// uni.setStorageSync('TMPL_IDS',tmplIds);
							// subscribe()
							
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},2000)
						}else{
							this.$api.toastMsg(res.message)
						}
					}).catch((err)=>{
						uni.hideLoading()
						this.$api.toastMsg(err.errMsg)
					})
				}
			},
			getOpenidAndUpdateUser(){
				wx.login({
				  success (res) {
				    if (res.code) {
				      //发起网络请求
					  wx.request({
					    url: 'https://www.cdlepan.com:7443/subscribe/getOpenidAndUpdateUser',
						method: 'get',
					    data: {
					       code: res.code
					     },
						header: {
							'Content-Type': 'application/json;charset=UTF-8;',
							'Authorization': uni.getStorageSync('USER_TOKEN')
						}
					  })      
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    }
				  }
				})   
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.login-container{
		background: url(../../static/login/bj.png)  no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100vh;
		.login-title{
			text-align: center;
			padding-top: 20vh;
			color: #fff;
			font-size: 60upx;
			margin-left: 20px;
		}
		.logo{
			height: 24*4px;
			width: 32*4px;
		}
		.login-panel{
			width: 700upx;
			margin: 0 auto;
			background: url(../../static/login/panel_bg.png) no-repeat;
			background-size: 100% 100%;
			padding: 200upx 150upx;
			box-sizing: border-box;
			.login-btn-panel{
				margin-top: 50upx;
				background: url(../../static/login/btn-bg.png) no-repeat;
				background-size: 100% 100%;
				color: #fff;
				width: 400upx;
				height: 78upx;
				line-height: 78upx;
				text-align: center;
				font-size: 26upx;
			}
			.input_item{
				display: flex;
				height: 90upx;
				border: 0px;
				outline: none;
				border-bottom: 1px solid #eee;
				padding: 15upx 0upx;
				margin-bottom: 15upx;
				&.nborder{
					border: 0px;
				}
				&.dashed-border{
					outline: none;
					border: 0px;
					border-bottom: 1px dashed #333;
				}
				&:focus{
					outline: none;
					border: 0px;
					border-bottom: 1px dashed #333;
				}
				.login-ipt-placeholder{
					color: #DADADA;
					font-size: 28upx;
				}
				.ipt-icon{
					flex: 0 0 35upx;
					height: 40upx;
					position: relative;
					top: 10upx;
				}
				.ipt{
					flex: 1;
					padding-left: 40upx;
					font-size: 32upx;
					height: 60upx;
					line-height: 60upx;
					color: #666;
					border: 0px;
					&:focus{
						border: 0px;
						outline: none;
					}
					&.border{
						padding-left: 5upx;
						border-bottom: 1px solid #eee;
						&.dashed-border{
							border-bottom: 1px dashed #333;
						}
					}
				}
				.code-panel{
					width: 135upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					background-color: rgba(0,0,0,0.4);
				}
				
			}
		}
	}
	
</style>
